<style lang="less">
@import "../styles/common.less";
@import "../tables/components/table.less";
</style>
<style>
</style>
<template>
  <div class="div-relative">
    <Row class="row" :gutter="10">
      <Col span="24" class="padding-left-10 list-div">
        <Card>
          <div class="table-head" v-show="selectionArr.length == 0">
            <div class="left" @keydown.enter="searchFun">
              <Input v-model="search_title" size="default" placeholder="关键字" />
            </div>
            <div class="left-btn">
              <Button type="text" icon="ios-search" @click="searchFun()">搜索</Button>
            </div>
            <Button type="primary" class="Button" @click="add()">添加</Button>
          </div>
          <div class="table-head" v-show="selectionArr.length > 0">
            <div class="left-nums">选中 {{selectionArr.length}} 条 / 共 {{data.length}} 条</div>
            <div class="left-btn">
              <Button type="error" class="Button" @click="remove()">删除</Button>
            </div>
            <div class="left-btn">
              <Button
                type="warning"
                class="Button"
                @click="updateFun()"
                :disabled="selectionArr.length == 1 ? false : true"
              >修改</Button>
            </div>
            <Button type="text" class="Button" @click="hideNums()">取消</Button>
          </div>
          <Row class="margin-top-10">
            <Table
              stripe
              border
              :columns="columns"
              :data="data"
              @on-row-click="onRowData"
              @on-selection-change="selectionChange"
              ref="selectionTable"
            ></Table>
          </Row>
          <div style="margin: 10px;overflow: hidden;height: 36px;">
            <div style="float: right;">
              <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
            </div>
          </div>
        </Card>
      </Col>
    </Row>

    <!--详情-->
    <Drawer
      :closable="false"
      :width="DrawerWidth"
      v-model="showCurrentTableData"
      class="Drawer-body"
      @on-close="closeDrawerFun"
    >
      <div class="Drawer_pStyle">
        <span></span>
        <span class="del" @click="asyncOK">
          <Button type="error" size="small" icon="md-close"></Button>
        </span>
      </div>
      <div class="body">
        <div class="body-Detail-div">
          <div class="title-div">
            <div class="title-title" v-text="dataDetail.title"></div>
          </div>
          <Form label-position="top" class="no-border form-line">
            <FormItem label="徽章图片" v-if="dataDetail.url">
              <img
                :src="dataDetail.url"
                alt="徽章图片"
                style="width: 200px;height: 260px;"
                v-if="dataDetail.url"
              />
            </FormItem>
            <div class="title-height"></div>
            <FormItem label="创建时间">
              <div class="zj-div" v-text="dataDetail.create_time"></div>
            </FormItem>
          </Form>
          <div class="title-height"></div>
          <div class="ck-editor-content word-wrap" v-html="dataDetail.content"></div>
        </div>
      </div>
      <div class="footer" :style="{width: DrawerWidth - 32 + 'px'}">
        <Button type="text" @click="asyncOK">取消</Button>
        <Button type="warning" @click="update(dataDetail,'detail')">修改</Button>
      </div>
    </Drawer>
    <!--编辑-->
    <Drawer
      :closable="false"
      :width="WindowWidth"
      v-model="addCurrentTableData"
      class="Drawer-body"
    >
      <div class="Drawer_pStyle">
        <span></span>
        <span class="del" @click="hideAddModal">
          <Button type="error" size="small" icon="md-close"></Button>
        </span>
      </div>
      <div class="body">
        <Form label-position="top" class="from-content">
          <FormItem label="徽章名称">
            <Input v-model="addData.title" placeholder="徽章名称"></Input>
          </FormItem>

          <FormItem label="徽章图片">
            <img
              :src="avatar"
              alt="徽章"
              style="width: 200px;height: 260px;"
              v-if="avatar"
            />
            <Button
              type="default"
              size="small"
              class="margin-left-10 userImageBtn"
              @click="updateImage"
            >上传徽章</Button>
            <input
              type="file"
              id="avatar_file"
              style="display: none;"
              accept="image/*"
              @change="sendFileClick()"
            />
          </FormItem>
          <FormItem label="获得条件">
            <Input v-model="addData.content" type="textarea" class="textarea_resize"
                   :autosize="{minRows: 3}" placeholder="获得条件"></Input>
          </FormItem>

        </Form>
      </div>
      <div class="footer" :style="{width: WindowWidth - 32 + 'px'}">
        <Button type="text" @click="hideAddModal">取消</Button>
        <Button type="primary" :loading="saveLoading" @click="save()">确定</Button>
      </div>
    </Drawer>
    <spin-page :showSpin="showSpin"></spin-page>
  </div>
</template>
<style>
.no-data {
  width: 100%;
  font-size: 30px;
  color: #777777;
  text-align: center;
  padding-top: 30%;
}
.zj-div {
  font-size: 14px;
  width: 100%;
  line-height: 40px;
}
</style>
<script>
import Cookies from "js-cookie";
import Util from "../../libs/util";
import Utils from "../../libs/mod.utils";
import String from "../../libs/mod.string";
import Modal from "../../libs/mod.Modal";
import Ckeditor from "../../libs/mod.ckeditor";
import commentsList from "../components/comments-list.vue";
import evaluateList from "../components/evaluate-list.vue";
import userAvatar from "../components/user-avatar.vue";
import userInfo from "../components/user-info.vue";
import spinPage from "../components/spin-page.vue";
import tagAdd from "../components/tag/tag-add.vue";
import modelAdd from "../components/model/model-add.vue";
import modelDetailUtils from "../../libs/vue.modelDetail";
import showAccessory from "../components/show-accessory.vue";

export default {
  components: {
    commentsList,
    evaluateList,
    userAvatar,
    userInfo,
    tagAdd,
    modelAdd,
    spinPage,
    showAccessory
  },
  data() {
    return {
      uid: Util.toJson(localStorage.getItem("userInfo")).id,
      total: 0,
      page: 1,
      size: 10,
      order_by: [],
      id: "",
      search_title: "",
      showCurrentTableData: false,
      loading: true,
      showCurrentColumns: [],
      editInlineAndCellData: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          key: "title",
          title: "徽章名称",
          tooltip: true,
          align: "center"
        },
        {
          key: "content",
          title: "获得条件",
          tooltip: true,
          align: "center"
        },
        {
          key: "create_time",
          title: "创建时间",
          align: "center"
        }
      ],
      data: [],
      dataDetail: {},
      addCurrentTableData: false,
      saveLoading: false,
      ajaxType: "add",
      addData: {
        title: "",
        content: "",
      },
      steps: 0,
      selectionArr: [],
      editor: null,
      DrawerWidth: Util.constant.DrawerWidth, // 抽屉的宽度
      WindowWidth: Util.constant.WindowWidth, // 窗口的宽度
      WindowHeight: Util.constant.WindowHeight, // 窗口的高度
      showSpin: false, //加载中
      avatarId: "",
      avatar: "" // 徽章
    };
  },
  beforeMount: function() {
    var _this = this;
  },
  beforeDestroy: function() {
    var _this = this;
  },
  destroyed: function() {
    var _this = this;
  },
  created: function() {
    var _this = this;
    _this.getData();
  },
  mounted() {
    var _this = this;
  },
  methods: {
    // 搜索
    searchFun: function() {
      var _this = this;
      _this.page = 1;
      _this.getData();
    },
    onRowData: function(data, index) {
      var _this = this;
      _this.show(data);
    },
    changePage(page) {
      var _this = this;
      _this.page = page;
      _this.getData();
    },
    // 关闭了详情
    closeDrawerFun: function() {
      var _this = this;
      _this.dataDetail = {};
    },
    show: function(data) {
      var _this = this;
      var id = data.id;
      _this.id = id;

      var data = {
        id: _this.id
      };
      var params = {
        url: "/badge/query",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      _this.showSpin = true;
      function _successFun(res) {
        _this.showSpin = false;
        if (res.result == 0) {
          var _data = res.data || [];
          _this.dataDetail = _data;
          _this.showCurrentTableData = true;
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    asyncOK: function() {
      var _this = this;
      _this.showCurrentTableData = false;
      _this.showExportData = false;
    },
    // 列表多选 选中数据
    selectionChange: function(selection) {
      var _this = this;
      _this.selectionArr = selection;
    },
    // 取消列表选中
    hideNums: function() {
      var _this = this;
      this.$refs.selectionTable.selectAll(false);
      _this.selectionArr = [];
    },
    // 隐藏编辑页面
    hideAddModal: function() {
      var _this = this;
      _this.addCurrentTableData = false;
      _this.getData();
    },
    getData: function() {
      var _this = this;
      var data = {
        page: _this.page,
        size: _this.size,
        keyWord: _this.search_title.trim()
      };
      var params = {
        url: "/badge/list",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      _this.showSpin = true;
      Util.ajax(_this, params);
      function _successFun(res) {
        _this.showSpin = false;
        if (res.result == 0) {
          var _data = res.data || [];
          _this.total = res.rows;
          _this.data = _data;
          _this.hideNums();
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    // 显示添加界面
    add: function(_data) {
      var _this = this;
      _this.from = "";
      _this.ajaxType = "add";
      _this.addData.title = "";
      _this.addData.content = "";
      _this.avatar = "";
      _this.avatarId = "";
      _this.addCurrentTableData = true;
    },
    // 保存数据
    save: function() {
      var _this = this;
      var title = _this.addData.title;
      if (title == "") {
        _this.$Message.destroy();
        _this.$Message.error("请填写徽章名称!");
        return false;
      }
      if (_this.avatarId == "") {
        _this.$Message.destroy();
        _this.$Message.error("请填上传徽章!");
        return false;
      }
      var content = _this.addData.content;
      if (content == "") {
        _this.$Message.destroy();
        _this.$Message.error("请填写获得条件!");
        return false;
      }

      var data = {
        id: _this.id,
        type: "other",
        title: title,
        content: content,
        fid: _this.avatarId
      };
      var url = "/badge/add";
      if (_this.ajaxType == "update") {
        url = "/badge/update";
      }
      var params = {
        url: url,
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      _this.saveLoading = true;
      function _successFun(res) {
        _this.saveLoading = false;
        if (res.result == 0) {
          _this.page = 1;
          _this.getData();
          if (_this.from == "detail") {
            _this.show(_this.dataDetail);
          }
          _this.addCurrentTableData = false;
          _this.addData.title = "";
          _this.addData.content = "";
        } else {
          _this.$Message.destroy();
          _this.$Message.error("保存信息失败!");
        }
      }
    },
    // 列表上修改
    updateFun: function() {
      var _this = this;
      _this.from = "";
      var selectionArr = _this.selectionArr;
      if (selectionArr.length == 0) {
        _this.$Message.destroy();
        _this.$Message.error("请选择要修改的数据!");
        return false;
      }
      if (selectionArr.length > 1) {
        _this.$Message.destroy();
        _this.$Message.error("一次只能修改一条数据!");
        return false;
      }
      var data = selectionArr[0];
      var id = data.id;

      var data = {
        id: id
      };
      var params = {
        url: "/badge/query",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      _this.showSpin = true;
      function _successFun(res) {
        _this.showSpin = false;
        if (res.result == 0) {
          var _data = res.data || {};
          _this.update(_data);
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    // 显示修改界面
    update: function(data, from) {
      var _this = this;
      _this.ajaxType = "update";
      _this.from = from ? from : "";
      var id = data.id;
      _this.id = id;
      _this.addData.title = data.title || "";
      _this.addData.content = data.content || "";
      _this.avatarId = data.fid || "";
      _this.avatar = data.url || "";
      _this.addCurrentTableData = true;
    },
    // 删除
    remove: function() {
      var _this = this;
      var selectionArr = _this.selectionArr;
      if (selectionArr.length == 0) {
        _this.$Message.destroy();
        _this.$Message.error("请选择要删除的数据!");
        return false;
      }
      var selectionIds = [];
      for (var k in selectionArr) {
        if (!selectionArr[k]) {
          continue;
        }
        var id = selectionArr[k].id;
        selectionIds.push(id);
      }
      Modal.confirm(
        _this,
        { content: "确定删除选中的信息？" },
        function() {
          var data = {
            ids: selectionIds
          };
          var params = {
            url: "/badge/del",
            type: Util.method.post,
            data: data,
            success: _successFun
          };
          Util.ajax(_this, params);
          function _successFun(res) {
            if (res.result == 0) {
              _this.page = 1;
              _this.getData();
            }else if (res.result == 26){
              _this.page = 1;
              _this.getData();
              _this.$Message.destroy();
              _this.$Message.error("绑定课程的徽章不能删除!");
            } else {
              _this.$Message.destroy();
              _this.$Message.error("删除信息失败!");
            }
          }
        },
        function() {}
      );
    },
    // 上传头像
    updateImage: function() {
      var _this = this;
      _this.userImageId = "";
      document.getElementById("avatar_file").click();
    },
    sendFileClick: function() {
      var _this = this;
      var __this = document.getElementById("avatar_file");
      var fileObj = __this.files[0];

      var formData = new FormData();
      formData.append("file", fileObj);
      formData.append("type", "image");
      var params = {
        domain: "http://kcgl.jnaw.top/kcgl",
        url: "/file/addImage",
        type: Util.method.post,
        data: formData,
        success: _successFun
      };
      Util.ajax(_this, params);
      function _successFun(res) {
        if (res.result == 0) {
          var data = res.data;
          var id = data.id;
          var name = data.name;
          var thumb = data.thumb;
          var url = data.url;
          _this.avatar = url;
          _this.avatarId = id;
        } else {
          _this.$Message.destroy();
          _this.$Message.error("上传失败!");
        }
      }
    }
  }
};
</script>
